<template>
  <!--  <up-popup v-model="show" mode="bottom" border-radius="14" height="60%">-->
  <up-popup :show="show" @close="show=false" @open="open" round="10" :customStyle="{height: '60vh'}">
    <swiper class="swiper" style="height: 300rpx;padding: 30rpx">
      <!--      <swiper-item style="padding: 20rpx;box-sizing: border-box" v-for="item of 9" :key="item">-->
      <!--        <view class="vip-card">-->
      <!--          <view class="vip-title">-->
      <!--            LV{{ item }}-->
      <!--            <span style="font-size: 28rpx">乘凉VIP</span>-->
      <!--          </view>-->
      <!--          <view>-->
      <!--            <view class="flex-between u-f-sx" style="margin-bottom: -16rpx">-->
      <!--              <view>Lv{{ item }}</view>-->
      <!--              <view>Lv{{ item + 1 }}</view>-->
      <!--            </view>-->
      <!--            <u-line-progress :show-percent="true" :striped="true" :striped-active="true" :percent="70"-->
      <!--                             active-color="#fff" inactive-color="rgb(136 136 136)"-->
      <!--                             height="10"></u-line-progress>-->
      <!--            <view class="u-f-sx p-c-20">成长值&nbsp;0/200</view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--      </swiper-item>-->
      <up-swiper
          :list="list2"
          previousMargin="30rpx"
          nextMargin="30rpx"
          keyName="image"
          :autoplay="false"
          radius="5"
          bgColor="#fff"
      >
        <template #default="scope">
          <view class="vip-card">
            <image :src="scope.item.image" class="level-img"></image>
            <view class="vip-title">
              LV{{ scope.item.level }}
              <span style="font-size: 28rpx">乘凉VIP</span>
            </view>
            <view style="margin-top: 20rpx;width: 95%">
              <view class="flex-between u-f-sx">
                <view>Lv{{ scope.item.level }}</view>
                <view>Lv{{ scope.item.level + 1 }}</view>
              </view>
              <u-line-progress :show-percent="true" :striped="true" :striped-active="true" :percent="70"
                               active-color="#fff" inactive-color="rgb(136 136 136)"
                               height="10"></u-line-progress>
              <view class="u-f-sx p-c-20">成长值&nbsp;{{ scope.item.experience }}/{{ scope.item.levelExp }}</view>
            </view>
          </view>
        </template>
      </up-swiper>
    </swiper>
    <view class="p-r-30">
      <h5 style="line-height: 40rpx;">等级特权</h5>
      <view>
        <view>
          <view></view>
        </view>
        <view></view>
      </view>
      <h5 style="line-height: 40rpx;">充值权益</h5>
      <h5 style="line-height: 40rpx;">消费积分</h5>
      <h5 style="line-height: 40rpx;">成长值获得</h5>
    </view>
  </up-popup>

</template>
<script setup lang="ts">

import {ref, defineExpose} from "vue";

const show = ref(false)
const open = () => {
  show.value = true
}

const list2 = ref([
  {
    level: 1,
    experience: 100,
    levelExp: 200,
    image: '/static/img/vip.png'
  },
  {
    level: 2,
    experience: 100,
    levelExp: 400,
    image: '/static/img/vip.png'
  },
  {
    level: 3,
    experience: 100,
    levelExp: 600,
    image: '/static/img/vip.png'
  },
  {
    level: 4,
    experience: 100,
    levelExp: 800,
    image: '/static/img/vip.png'
  },
  {
    level: 5,
    experience: 100,
    levelExp: 1000,
    image: '/static/img/vip.png'
  },
  {
    level: 6,
    experience: 100,
    levelExp: 1200,
    image: '/static/img/vip.png'
  },
  {
    level: 7,
    experience: 100,
    levelExp: 1400,
    image: '/static/img/vip.png'
  },
  {
    level: 8,
    experience: 100,
    levelExp: 1800,
    image: '/static/img/vip.png'
  },
  {
    level: 9,
    experience: 100,
    levelExp: 2000,
    image: '/static/img/vip.png'
  },
])

defineExpose({open})
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.vip-card {
  color: #a6a6a6;
  box-shadow: 0 0 20rpx var(--shadow-color);
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20rpx;
  overflow: hidden;
  box-sizing: border-box;

  .level-img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
    border-radius: 10rpx;
    z-index: -1;
  }

  .vip-title {
    font-size: 60rpx;
    font-weight: 600;
    padding: 10rpx 0;
  }
}
</style>